<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery-3.5.1.min.js"></script>
    <script src="/js/bootstrap.bundle.min.js"></script>
    <script>
        $(function (){
           $.get(
               "user/users",
                function (obj){
                   console.log(obj);
                   for(var i in obj){
                       let sex= obj[i].sex == 0 ? '男':'女';
                       let status = obj[i].status ==0 ? '活动':'禁用';
                       $(".table-bordered").append("<tr><td>"+obj[i].uid+"</td><td>"+obj[i].username+
                           "</td><td>"+obj[i].realname+"</td><td>"+obj[i].birthday+"</td><td>"+sex+"</td><td>"+status+"</td>"+
                           "<td><button value='"+obj[i].uid+"' class='btn btn-warning'>删除</button>" +
                           "<button class='btn btn-info' value='"+obj[i].uid+"' data-toggle=\"modal\" data-target=\"#myModal\">编辑</button></td></tr>")
                   }
                   $(".btn-info").click(function (){
                       let uid=$(this).val();
                       //获取数据并回显到页面
                       $.get(
                           "user/find/"+uid,
                            function (obj){
                               console.log(obj);
                               $("[name='uid']").val(obj.uid);
                               $("[name='username']").val(obj.username);
                               $("[name='realname']").val(obj.realname);
                               $("[name='birthday']").val(obj.birthday);
                               $("[name='password']").val(obj.password);
                               $("[name='sex'][value='"+obj.sex+"']").prop("checked",true);
                            }
                       )
                   })
                   //删除
                    $(".btn-warning").click(function (){
                        let id=$(this).val();
                        alert(id);
                        if(confirm("确认删除吗？")){
                             $.get(
                                 "user/delete/"+id,
                                  function (obj){
                                     if(obj){
                                         alert("删除成功！");
                                         location.reload();
                                     }else{
                                         alert("删除失败！");
                                     }
                                  }
                             )
                        }
                    })
                }
           );//
            $(".btn-success").click(function (){
                $.post(
                    "user/save",
                    $("form").serialize(),
                    function (obj){
                        if(obj){
                            alert("保存成功！");
                            location.reload();
                        }else{
                            alert("保存失败！");
                        }
                    }

                )
            })
        })
    </script>
</head>
<body>
<div class="container">

    <table class="table table-bordered table-hover">
        <tr>
            <th>编号</th>
            <th>账号</th>
            <th>姓名</th>
            <th>生日</th>
            <th>性别</th>
            <th>状态</th>
            <th>
                <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                    新增
                </button>

            </th>
        </tr>
    </table>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">新增/编辑</h4>
            </div>
            <div class="modal-body">
                <form>
                    <input type="hidden" name="uid">
                    <input type="text" name="username" placeholder="请输入账号"><br>
                    <input type="text" name="password" placeholder="请输入密码"><br>
                    <input type="text" name="realname" placeholder="请输入姓名"><br>
                    <input type="text" name="birthday" placeholder="请输入生日"><br>
                    性别：<input type="radio" name="sex" value="0">男
                    <input type="radio" name="sex" value="1">女<br>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-success">提交</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

</body>
</html>
